<template>
    <div class="login-container">
        <form @submit.prevent="handleLogin">
            <h2 class="logo">商品管理系统</h2>

            <div class="input-group">
                <input
                        v-model="username"
                        type="text"
                        placeholder="用户名"
                        :class="{ 'is-invalid': usernameErrors }"
                        @blur="validateUsername"
                />
                <span v-if="usernameErrors" class="error-message">{{ usernameErrors }}</span>
            </div>

            <div class="input-group">
                <input
                        v-model="password"
                        type="password"
                        placeholder="密码"
                        :class="{ 'is-invalid': passwordErrors }"
                        @blur="validatePassword"
                        @keyup.enter="handleLogin"
                />
                <span v-if="passwordErrors" class="error-message">{{ passwordErrors }}</span>
                <div class="password-strength" v-if="showStrength">
                    {{ passwordStrength }}
                </div>
            </div>

            <div class="remember-forgot">
                <label>
                    <input type="checkbox" v-model="rememberMe" /> 记住我
                </label>
            </div>

            <button
                    type="submit"
                    :disabled="isLoading"
                    :class="{ 'btn-primary': !isLoading, 'btn-disabled': isLoading }"
            >
                {{ isLoading ? '登录中...' : '登 录' }}
            </button>

            <div v-if="error" class="error-message">{{ error }}</div>

            <div class="register-link">
                还没有账号？<router-link to="/register">立即注册</router-link>
            </div>
        </form>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import axios from 'axios';

// 表单状态
const username = ref('');
const password = ref('');
const rememberMe = ref(false);
const isLoading = ref(false);
const error = ref('');

// 验证状态
const usernameErrors = ref('');
const passwordErrors = ref('');
const phoneErrors = ref('');

// 密码强度检测
const passwordStrength = computed(() => {
    const strength = {
        length: password.value.length >= 6,
        lowercase: /[a-z]/.test(password.value),
        uppercase: /[A-Z]/.test(password.value),
        number: /\d/.test(password.value),
        special: /[\W_]/.test(password.value)
    };

    let score = 0;
    Object.values(strength).forEach(Boolean => score += Boolean);

    return {
        score,
        message: ['弱', '一般', '中等', '强'][Math.min(score/3, 3)]
    };
});

// 表单验证方法
const validateUsername = () => {
    if (!username.value.trim()) {
        usernameErrors.value = '用户名不能为空';
    } else if (username.value.length > 20) {
        usernameErrors.value = '用户名不能超过20个字符';
    } else {
        usernameErrors.value = '';
    }
};

const validatePassword = () => {
    if (!password.value) {
        passwordErrors.value = '密码不能为空';
    } else if (password.value.length < 6) {
        passwordErrors.value = '密码至少需要6位字符';
    } else {
        passwordErrors.value = '';
    }
};

const validatePhone = () => {
    if (!password.value) {
        phoneErrors.value = '手机号码不能为空';
    } else if (!/^1[3-9]\d{9}$/.test(password.value)) {
        phoneErrors.value = '请输入有效的手机号码';
    } else {
        phoneErrors.value = '';
    }
};

// 登录处理
const handleLogin = async () => {
    try {
        isLoading.value = true;
        error.value = '';

        // 这里应该调用实际的后端接口
        const response = await axios.post('/api/login', {
            username: username.value,
            password: password.value,
            remember: rememberMe.value
        });

        if (response.data.code === 200) {
            // 存储token到localStorage
            localStorage.setItem('authToken', response.data.token);
            router.push('/dashboard');
        } else {
            error.value = response.data.message || '登录失败';
        }
    } catch (err) {
        error.value = '网络请求失败，请稍后再试';
    } finally {
        isLoading.value = false;
    }
};

</script>

<style scoped>
.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.6s ease-out;
}

input, button {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 2px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
}

input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

button {
    background: #4CAF50;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease;
}

button:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

.error-message {
    color: #dc3545;
    font-size: 0.9em;
    margin-top: 5px;
    display: block;
}

.password-strength {
    margin-top: 5px;
    color: #28a745;
    font-size: 0.9em;
}

.modal {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.register-link {
    margin-top: 20px;
    text-align: center;
    color: #666;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>